<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>百度首页</title>
		<link rel="stylesheet" type="text/css" href="css/baidu.css" />
		<link rel="shortcut icon" type="image/x-icon" href="ico.jpg" />
	</head>

	<body>
		<div class="warpper">
			<!-- 顶部布局 -->
			<div class="header">
				<!-- 左边信息 -->
				<div class="header-f">
					<div class="info">
						天气：<img src="images/yun.png">&nbsp;29℃ &nbsp;
						<span>良</span>&nbsp;92 <span class="show-vertical">|</span>
						<a>宝箱</a>&nbsp;&nbsp;<a class="change-them">换肤</a>&nbsp;&nbsp;<a>消息</a>
					</div>
				</div>

				<!-- 右边菜单 -->
				<div class="header-r">
					<ul class="header-ul">
						<li class="header-li"><a href="#"><b>糯米</b></a></li>
						<li class="header-li"><a href="#"><b>地图</b></a></li>
						<li class="header-li"><a href="#"><b>hao123</b></a></li>
						<li class="header-li"><a href="#"><b>地图</b></a></li>
						<li class="header-li"><a href="#"><b>视频</b></a></li>
						<li class="header-li"><a href="#"><b>贴吧</b></a></li>
						<li class="header-li"><a href="#"><b>登录</b></a></li>
						<li class="header-li"><a href="#"><b>设置</b></a></li>
						<li class="more_li header-li">
							<a href="#" class="vi-tab"><input type="button" value="更多产品" class="more_product" /></a>

							<div id="header-tab" class="more-tab">
								<p>更多产品</p>
								<ul class="he-mor-tab">
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li>
										<a><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/music.png?v=md5"><br/>音乐</a>
									</li>
									<li><a>全部产品>></a></li>
								</ul>
							</div>
						</li>
					</ul>
				</div>

			</div>

			<!--换肤布局-->
			<div class="them">
				<div class="them-meun">
					<ul>
						<li class="activity-them">纯色</li>
						<li>纯色</li>
						<li>纯色</li>
						<li>纯色</li>
						<li>纯色</li>
					</ul>
				</div>

				<div class="them-color">
					<ul>
						<li class="t1" onclick="changeTheme('t1')"></li>
						<li class="t2" onclick="changeTheme('t2')"></li>
						<li class="t3" onclick="changeTheme('t3')"></li>
						<li class="t4" onclick="changeTheme('t4')"></li>
					</ul>
				</div>
				<p class="no-them" onclick="changeTheme('none')">不使用皮肤</p>
				<p class="them-close">收起</p>
			</div>

			<!-- 中间搜索框 -->
			<div class="content-from">
				<img src="images/bd_logo1.png">
				<form action="https://www.baidu.com/s?">
					<input type="text" class="input_text" name="qwe" required="required" />
					<input type="button" value="百度一下" class="btn_baidu" />
				</form>
			</div>

			<!-- 中间信息 -->
			<div class="content-info">
				<div class="con-meun">
					<ul id="tab-meun">
						<li class="click-li">
							<a>
								<img src="images/ren.png">我的关注
								<a>
						</li>
						<li><a>推荐<a></li>
					    <li><a>视频<a></li>
					    <li><a>导航<a></li>
					    <li><a>购物<a></li>
				</ul>
				<img class="set-img" src="images/set.png"/>
			    </div>
			<div class="con-main">
				<div class="content con-visible">
				   <div class="my-nav">
				   	我的导航
				   </div>
				   <div class="my-custom">
				   	自定义
				   </div>
				</div>
				<div class="content">
				   <img src="images/推荐.png" />
				</div>
				<div class="content">
				   <img src="images/视频.png" />
				</div>
				<div class="content">
				   <img src="images/导航.png" />
				</div>
				<div class="content">
				   <img src="images/购物.png" />
				</div>
			</div>
		</div>

       		 <!--底部布局-->
			<div class="footer">
			设为首页 ©2016 Baidu 使用百度前必读 意见反馈 京ICP证030173号 <br/>
			京公网安备11000002000001号
		    </div>


	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/baidu.js"></script>
</body>
</html>